<template>
	<view>
		<view class="setBlock white-bac">
			<view class="padding-row view-middle-borderBottom">
				<view class="">
					<text class="iconfont text0 right">&#xe650;</text>
					<text class="title">快递信息</text>
				</view>
				<view>
					<text class="grey">{{ orders.deliveryCompany }}：{{ orders.deliverySn }}</text>
				</view>
			</view>

			<block v-if="logistic && logistic.state != 4" v-for="(item, index) in logistic.Traces" :key="index">
				<view class="set_box view-flex view-flex-between">
					<view class="set-left view-flex-column view-flex-column-end right" style="width:12%;">
						<view class="grey text0">{{ item.createDate }}</view>
						<view class="grey text0"></view>
						<view class="set-left-bottom"></view>
					</view>

					<view v-if="index == 0 && logistic.state == 3" class="set-right1 green set-right">
						<view class="set-text">{{ item.content ? item.content : '' }}</view>
						<view class="set-bottom"></view>
					</view>
					<view v-else-if="index == logistic.Traces.length - 1" class="set-right-last">
						<view class="set-text"> {{item.content ? item.content : '' }}</view>
						<view class="set-bottom"></view>
					</view>
					<view v-else class="set-right" style="width:85%">
						<view class="set-text">{{ item.content ? item.content : '' }}</view>
						<view class="set-bottom"></view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="left view-middle-noborderBottom"><text class="set-text left grey">暂无物流信息</text></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//session
			sessionid: '',
			hearder: '',
			orderList: [],
			tabbarIndex: 0,
			deliveryname: '',
			orders: {
				orderid: '',
				deliverycode: ''
			},
			logistic: {
				Traces: [
					{
						day: '',
						day_time: '',
						AcceptStation: '',
						Remark: ''
					}
				]
			}
		};
	},
	onLoad(option) {
		this.sessionid = uni.getStorageSync('sessionid');
		this.hearder = uni.getStorageSync('hearder');
		if (this.sessionid == null || this.sessionid == '') {
			uni.showToast({ title: '请先登录！' });
			return;
		}
		var header = this.hearder;
		var sessionid = this.sessionid;
		console.log(header + '' + sessionid);

		this.orderList = [];
		let tbIndex = parseInt(option.tbIndex);

		var data = {};
		this.$Request.get(this.$api.logistics.detail + tbIndex, data, this.hearder + ' ' + this.sessionid).then(res => {
			if (res.code == 200) {
				this.orders = res.data.order;
				this.logistic.Traces = res.data.logisticsItemList;
			} else {
				uni.showToast({ title: '订单物流信息获取失败' });
			}
		});
	},
	onPageScroll(e) {
		return;
		//兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
	},
	methods: {}
};
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}
.set-left-bottom {
	height: 50upx;
}
.set_box {
	padding: 10upx;
}
.set-right {
	margin-top: 10upx;
	margin-left: 50upx;
	width: 80%;
	position: relative;
}
.set-right-last {
	margin-top: 10upx;
	margin-left: 50upx;
	width: 80%;
	position: relative;
}
.set-right-last::before {
	content: '\e652'; /* 必须存在如果没有图标就留空  &#xe66a;已发货*/
	color: #c6c6c6; /* 设置颜色 */
	position: absolute; /* 定位 */
	left: -50upx; /* 移动到左边 */
	top: 0; /* 移动到左边 */
	font-weight: bold; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	font-family: 'iconfont' !important; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	font-size: 30upx; /* 图标大小 */
	font-style: normal; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	-webkit-font-smoothing: antialiased; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	-moz-osx-font-smoothing: grayscale; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}
.set-right::before {
	content: '\e655'; /* 必须存在如果没有图标就留空  &#xe66a; &#xe655;已发货*/
	color: #c6c6c6; /* 设置颜色 */
	position: absolute; /* 定位 */
	left: -59upx; /* 移动到左边 */
	top: -20upx; /* 移动到左边 */
	font-weight: bold; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	font-family: 'iconfont' !important; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	font-size: 40upx; /* 图标大小 */
	font-style: normal; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	-webkit-font-smoothing: antialiased; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	-moz-osx-font-smoothing: grayscale; /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
}
.set-right1::before {
	content: '\e64c' !important; /* 必须存在如果没有图标就留空  \e64c */
	font-size: 30upx !important;
	top: -8upx !important;
	left: -52upx !important;
	color: #00ce47 !important;
}
.set-right::after {
	content: ''; /* 必须存在如果没有图标就留空 */
	bottom: 0; /* 定位 距离*/
	border-left: #c6c6c6 1px solid; /* 横线颜色 */
	left: -40upx; /* 定位 距离*/
	height: 85%; /* 高度 */
	position: absolute; /* 定位 */
}
.set-text {
	width: 100%;
	height: auto;
}
.set-bottom {
	height: 100upx;
}
.view-flex {
	display: flex;
	flex-flow: row nowrap;
}

.view-flex-left {
	justify-content: flex-start;
	align-items: center;
}
.view-flex-column {
	display: flex;
	flex-flow: column wrap;
}

.view-flex-column-end {
	justify-content: flex-end;
	align-items: flex-end;
}
</style>
